/* eslint-disable no-undef */
import React, { useEffect, useState } from 'react';
import { If, For } from 'babel-plugin-jsx-control-statements';
import { Form } from 'antd';
import { useHistory } from 'react-router-dom';
import qs from 'qs';
import RequestApi from '@/utils/request';
import css from '../index.scss';

/**
 * 停车管理备案中我的备案中停车场设施-基本信息详情
 * -
 */
export default () => {
	const [data, setData] = useState();
	const history = useHistory();
	const search = qs.parse(history.location.search, { ignoreQueryPrefix: true });
	const { id } = search;
	useEffect(() => {
		RequestApi.connection('get', `parkLotRecordTask/parkLotTaskInfo/${id}`).then((response) => {
			setData(response.data.rows.parkLotBaseInfoDTO);
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);
	return (
		<If condition={data !== undefined}>
			<div>
				<Form.Item className={css.item} label="停车场名称:">
					<span>{data.name}</span>
				</Form.Item>

				<Form.Item className={css.item} label="所在地区:">
					<span>{data.districtName}</span>
				</Form.Item>

				<Form.Item label="详细地址:" className={css.item}>
					<span>{data.address}</span>
				</Form.Item>

				<Form.Item label="入口经纬度:" className={css.item}>
					<span>
						经度:
						{data.entranceLongitude}
					</span>
					<> </>
					<span>
						纬度:
						{data.entranceLatitude}
					</span>
				</Form.Item>

				<Form.Item label="停车场申请等级:" className={css.item}>
					<If condition={data.parkLevel === 0}>
						<span>普通</span>
					</If>
					<If condition={data.parkLevel === 1}>
						<span>特级</span>
					</If>
				</Form.Item>

				<Form.Item className={css.item}>
					<></>
				</Form.Item>

				<Form.Item label="停车场类型:" className={css.item}>
					<If condition={data.parkLotType === 1}>
						<span>配建</span>
					</If>
					<If condition={data.parkLotType === 2}>
						<span>公共</span>
					</If>
				</Form.Item>

				<Form.Item label="室内外类型:" className={css.item}>
					<If condition={data.parkLotRommType === 1}>
						<span>室内</span>
					</If>
					<If condition={data.parkLotRommType === 2}>
						<span>室外</span>
					</If>
				</Form.Item>

				<Form.Item label="建设工程竣工规划核实确认书:" className={css.item_file}>
					<If condition={data.confirmationOfCompletion !== null}>
						<For each="item" of={data.confirmationOfCompletion}>
							<a href={item.path} key={item.id}>
								{item.name}
							</a>
						</For>
					</If>
				</Form.Item>

				<Form.Item label="用地性质:" className={css.item}>
					<If condition={data.landUseNature === 1}>
						<span>机关单位</span>
					</If>
					<If condition={data.landUseNature === 2}>
						<span>企业</span>
					</If>
					<If condition={data.landUseNature === 3}>
						<span>公共</span>
					</If>
					<If condition={data.landUseNature === 4}>
						<span>小区</span>
					</If>
					<If condition={data.landUseNature === 5}>
						<span>个人</span>
					</If>
					<If condition={data.landUseNature === 6}>
						<span>租赁</span>
					</If>
					<If condition={data.landUseNature === 7}>
						<span>自用地</span>
					</If>
				</Form.Item>

				<Form.Item label="规划车位(个):" className={css.item}>
					<span>{data.planParkCount}</span>
				</Form.Item>

				<Form.Item label="停车库场建筑规模:" className={css.item}>
					<span>{data.parkLotScale}</span>
				</Form.Item>

				<Form.Item label="已售车位数(个):" className={css.item}>
					<span>{data.saleParkCount}</span>
				</Form.Item>

				<Form.Item label="对外经营车位数(个):" className={css.item}>
					<span>{data.externalParkCount}</span>
				</Form.Item>

				<Form.Item label="分层填写(对外经营车位数):" className={css.item}>
					<span>{data.externalParkCountDesc}</span>
				</Form.Item>

				<Form.Item label="停车位清理:" className={css.item_file}>
					<If condition={data.parkLotList !== null}>
						<For each="item" of={data.parkLotList}>
							<a href={item.path} key={item.id}>
								{item.name}
							</a>
						</For>
					</If>
				</Form.Item>

				<Form.Item label="停车场面积单位(平方米):" className={css.item}>
					<span>{data.parkArea}</span>
				</Form.Item>

				<Form.Item label="分层填写(停车场面积):" className={css.item}>
					<span>{data.parkAreaDesc}</span>
				</Form.Item>

				<Form.Item label="无障碍停车位数(个):" className={css.item}>
					<span>{data.noObstacleParkCount}</span>
				</Form.Item>

				<Form.Item label="充电车位数(个):" className={css.item}>
					<span>{data.chaegePileParkCount}</span>
				</Form.Item>

				<Form.Item label="充电车位证明材料:" className={css.item_file}>
					<If condition={data.chargePilesEvidentialMaterial !== null}>
						<For each="item" of={data.chargePilesEvidentialMaterial}>
							<a href={item.path} key={item.id}>
								{item.name}
							</a>
						</For>
					</If>
				</Form.Item>

				<Form.Item label="微型车位数(个):" className={css.item}>
					<span>{data.microParkCount}</span>
				</Form.Item>

				<Form.Item label="卸货车位数(个):" className={css.item}>
					<span>{data.dischargeParkCount}</span>
				</Form.Item>

				<Form.Item label="机械式停车位数(个):" className={css.item}>
					<span>{data.mechanicalParkCount}</span>
				</Form.Item>

				<Form.Item label="普通停车位数(个):" className={css.item}>
					<span>{data.commonParkCount}</span>
				</Form.Item>

				<Form.Item label="出入口数量(个):" className={css.item}>
					<span>{data.entranceExitScale}</span>
				</Form.Item>

				<Form.Item label="出入口车道数量(个):" className={css.item}>
					<span>{data.entranceExitLaneScale}</span>
				</Form.Item>

				<Form.Item label="位置属性:" className={css.item} style={{ width: '100%' }}>
					<span>{data.positionProperty}</span>
				</Form.Item>
			</div>
		</If>
	);
};
